<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- <meta name="referrer" content="nev -->
  <meta name="referrer" content="never">
  <meta http-equiv="expires" content="2626560">
  <title>04-Openlayers加载卫星云瑶地图服务</title>
  <style>
    iframe {
      height: 100vh;
      width: 100vw;
      /* pointer-events: none; */
    }

    body,
    html {
      padding: 0;
      margin: 0;
    }

    #map {
      height: 100vh;
    }
  </style>
</head>

<body>
  <h5 id="h5">获取的token</h5>
  <div id="zoom"></div>
  <div id="map"></div>
  <!-- <iframe id="mapiframe" src="https://3d.img.net"></iframe> -->
  <!-- <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> -->
  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <script
    src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
  <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  <script>
    let initMap = (data) => {
      console.log(ol.proj.transform([12579729.980128825, 3274110.579286478], 'EPSG:3857', 'EPSG:4326'))
      var projection = ol.proj.get('EPSG:4326');
      // 坐标原点
      var origin = [-400.0, 400.0];
      // 分辨率
      var resolutions = [0.0016846869456599084, 8.423434728299542E-4, 4.211717364149771E-4, 2.1058467847698563E-4];
      //地图范围
      var fullExtent = [112.30626776825166, 22.590658569048593, 114.72797295438163, 23.82554016094057];
      var fullExtent = [-180, -90, 180, 90];
      var origin1 = [-20037508.342789244, 20037508.342789244]
      var res = [156543.03392804097, 78271.51696402048, 39135.75848201024, 19567.87924100512, 9783.93962050256, 4891.96981025128, 2445.98490512564, 1222.99245256282, 611.49622628141, 305.748113140705, 152.8740565703525, 76.43702828517625, 38.21851414258813, 19.109257071294063, 9.554628535647032, 4.777314267823516, 2.388657133911758, 1.194328566955879, 0.5971642834779395, 0.29858214173896974]
      var matrixIds = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]
      var url = `https://img.net/access/rest/services/MosaicMap_2022_05M/Transfer`;
      const source = new ol.source.WMTS({
        url: url,
        matrixSet: "EPSG:3857",  // 设置矩阵集，这是一个用于瓦片地图切分的参数
        format: "image/webp",  // 设置图层图片格式
        maxZoom: 10,
        style: "default",  // 设置图层样式
        wrapX: true,  // 设置是否在水平方向上重复显示瓦片，true 表示重复，false 表示不重复
        crossOrigin: true,
        projection: ol.proj.get('EPSG:3857'),
        tileGrid: new ol.tilegrid.WMTS({
          origin: origin1,
          resolutions: res,  // 分辨率数组
          matrixIds: matrixIds
        }),  // 设置自定义瓦片网格，这里使用了前面创建的 tileGrid 变量，它包含了投影、分辨率和矩阵 ID 等信息
        tileLoadFunction: function (tile, src) {
          const xhr = new XMLHttpRequest();
          xhr.responseType = 'blob';
          xhr.addEventListener('loadend', function (evt) {
            const data = this.response;
            if (data !== undefined) {
              tile.getImage().src = URL.createObjectURL(data);
            } else {
              tile.setState(TileState.ERROR);
            }
          });
          xhr.addEventListener('error', function () {
            tile.setState(TileState.ERROR);
          });
          xhr.open('GET', src);
          xhr.setRequestHeader('x-gistack-token', data['x-gistack-token']);
          xhr.setRequestHeader('security-token', data['security-token']);
          xhr.send();
        }

      });
      const layer = new ol.layer.Tile({
        source,
        // maxZoom: 10,
        zIndex: 8
        // opacity: opacity
      });

      var map = new ol.Map({
        target: 'map',
        layers: [
          layer
          // 瓦片图层
          // vec_w
        ],
        view: new ol.View({
          //初始化中心点坐标
          // center: [113.2759, 23.1170],
          center: [112.935228, 28.265028],
          // resolutions: resolutions,
          // 注意：此处指定缩放级别不能通过zoom来指定，指定了也无效，必须通过resolution来指定
          // resolution: 0.034332275390625,
          zoom: 10,
          projection: projection,
          extent: fullExtent
        })
      });
      map.on('moveend', () => {
        console.log(map.getView().getZoom(), '地图层级');
        zoom.innerHTML = `地图层级：${map.getView().getZoom()}`;
      })
    }

    axios.post('https://www.img.net/access/rest/services/token?username=hnssthjt&password=wxyy@20200827', {
    }).then(res => {
      h5.innerHTML = `获取的token:${JSON.stringify(res.data)}`;
      initMap(res.data);
    })
  </script>
</body>

</html>